<template>
	<video id="myVideo" class="video" objectFit="cover" loop="true" :src="item.src" :controls='false' :show-center-play-btn="false" @click="click()">
		<cover-view v-if="!Play" class="iconfont iconziyuan icon" @click.stop="click"></cover-view>
	</video>
</template>

<script>
	export default {
		props: {
			item:{
				type:Object,
				default:()=>{
					return {}
				}
			},
		},
		data() {
			return {
				Play: false,
				videoContext:{},
			};
		},
		mounted() {
			this.videoContext = uni.createVideoContext('myVideo', this);
			console.log(this.videoContext,'this.videoContext')
		},
		methods: {
			click() {
				if (this.Play) {
					this.videoContext.play();
					this.Play = false;
				} else {
					this.videoContext.pause();
					this.videoContext.seek(0);
					this.Play = true;
				}
			},
		},
	}
</script>

<style>
.video {
	width: 100vw;
	height: 100vh;
	z-index: 19;
	position: relative;
}
.icon {
	position: absolute;
	bottom: calc(50vh - 10px);
	right: calc(50vw - 10px);
	color: #ffffff;
	font-size: 20px;
}
.mask{
	width: 100vw;
	height: 100vh;
}
</style>
